<template>
	<view class="group-list">
		<view v-for="(item,index) in minorList" :key="index">
			<view class="group-item" :class="{'ml':isMl,'group-item-b':current==index}" @tap="$emit('onShowAuth',[item,index,$event])">
				<image class="bg" v-if="item.type_name == '综合柜'" src="/static/images/group/bg_zh.png" alt="" mode="widthFix" />
				<image class="bg" v-else-if="item.type_name == '层架柜'" src="/static/images/group/bg_cj.png" alt="" mode="widthFix" />
				<image class="bg" v-else="item.type_name == '挂架柜'" src="/static/images/group/bg_gj.png" alt="" mode="widthFix" />
				<text class="title">{{item.type_name}}</text>
				<image class="edit_icon" v-show="isEdit" src="/static/images/group/edit_b.png" mode="widthFix" @click="editClick(item,index)"></image>
				<view class="main_icon">
					<image v-if="item.type_name == '综合柜'" src="/static/images/group/icon_zh.png" alt="" mode="widthFix" />
					<image v-else-if="item.type_name == '层架柜'" src="/static/images/group/icon_cj.png" alt="" mode="widthFix" />
					<image v-else="item.type_name == '挂架柜'" src="/static/images/group/icon_gj.png" alt="" mode="widthFix" />
				</view>
				<view class="info">
					<view>名称</view>
					<view class="name"><text>{{item.name}}</text></view>
				</view>
			</view>
		</view>
		<view class="add" @tap="onAdd" v-if="isShowAdd">
			<image class="bg" src="/static/images/group/add.png" alt="" mode="widthFix" />
		</view>
		<!-- 编辑副柜 -->
		<uni-drawer class="editDrawer" :width="50" ref="editDrawer" mode="right" :maskClick="false">
			<drawer-top title="副柜信息" @drawerClose="drawerClose" />
			<view class="contentTypeRadio">
				<view class="titleR">柜体类型：</view>
				<radio-group class="radioTypeTop" @change="editRadioChange">
					<label class="radioInfo" v-for="(item,index) in titleType" :key="index">
						<view>
							<radio color="#007AFF" :value="index" :checked="index===typeCurrent"/>
						</view>
						<view class="radioText">{{item}}</view>
					</label>
				</radio-group>
			</view>
			<edit-name :editIndex="editIndex"/>
			<Spicks titleName="刷卡器" ref="editCardSpicks" :array="card_list" :index="card_index"/>
			<view class="contentBoxR">
				<view class="titleR">RFID：</view>
				<checkbox-group class="checkBtn" @change="editCheckChange">
					<label class="checkInfo" v-for="(checkItem,index) in checkList" :key="checkItem.name" >
						<view>
							<checkbox :value="checkItem.name" :checked="rfid.indexOf(checkItem.name)>=0" />
						</view>
						<view class="checkText">{{checkItem.name}}</view>
					</label>
				</checkbox-group>
			</view>
			<view class="contentBoxRadio">
				<view class="titleR">门开关：</view>
				<radio-group class="radioTop" @change="editDoorChange">
					<label class="radioInfo" v-for="(item,index) in door_list" :key="index">
						<view>
							<radio color="#007AFF" :value="item.name" :checked="door==item.name" />
						</view>
						<view class="radioText">{{item.name}}</view>
					</label>
				</radio-group>
			</view>
			<view class="contentTypeRadio">
				<view class="titleR">扫码器：</view>
				<radio-group class="radioTypeTop" @change="editScanChange">
					<label class="radioInfo" v-for="(item,index) in scan_list" :key="index">
						<view>
							<radio color="#007AFF" :value="index" :checked="scan==index"  />
						</view>
						<view class="radioText">{{item.name}}</view>
					</label>
				</radio-group>
			</view>
			<submit-button title="修改" @click.native="editSubmitClick" />
			<image src="/static/images/xiaoxi/delete.png" class="delete" mode="widthFix" alt="" @click="deleteSubmitClick"/>
		</uni-drawer>
		
		<pop-up id="editpopup" ref="editpopup" type="dialog">
			<pop-up-dialog class="dialog" mode="base" content="确定修改副柜信息吗？" type="info" @confirm="editConfirmDialog()" />
		</pop-up>
		
		<pop-up id="deletepopup" ref="deletepopup" type="dialog">
			<pop-up-dialog class="dialog" mode="base" content="确定删除此副柜吗？" type="info" @confirm="deleteConfirmDialog()" />
		</pop-up>
		
		<!-- 添加副柜 -->
		<uni-drawer class="addDrawer" :width="50" ref="addDrawer" mode="right" :maskClick="false">
			<drawer-top title="添加副柜" @drawerClose="drawerClose" />
			<view class="contentTypeRadio">
				<view class="titleR">柜体类型：</view>
				<radio-group class="radioTypeTop" @change="radioChange">
					<label class="radioInfo" v-for="(item,index) in titleType" :key="index">
						<view>
							<radio color="#007AFF" :value="index" :checked="index===typeCurrent"/>
						</view>
						<view class="radioText">{{item}}</view>
					</label>
				</radio-group>
			</view>
			<add-name />
			<Spicks titleName="刷卡器" ref="addCardSpicks" :array="card_list" :index="0"/>
			<view class="contentBoxR">
				<view class="titleR">RFID：</view>
				<checkbox-group class="checkBtn" @change="checkboxChange">
					<label class="checkInfo" v-for="(checkItem,index) in checkList" :key="checkItem.name" >
						<view>
							<checkbox :value="checkItem.name"/>
						</view>
						<view class="checkText">{{checkItem.name}}</view>
					</label>
				</checkbox-group>
			</view>
			<view class="contentBoxRadio">
				<view class="titleR">门开关：</view>
				<radio-group class="radioTop" @change="doorRadioChange">
					<label class="radioInfo" v-for="(item,index) in door_list" :key="index">
						<view>
							<radio color="#007AFF" :value="item.name" />
						</view>
						<view class="radioText">{{item.name}}</view>
					</label>
				</radio-group>
			</view>
			<!-- <view class="contentTypeRadio">
				<view class="titleR">扫码器：</view>
				<radio-group class="radioTypeTop" @change="scanRadioChange">
					<label class="radioInfo" v-for="(item,index) in scan_list" :key="index">
						<view>
							<radio color="#007AFF" :value="index" />
						</view>
						<view class="radioText">{{item.name}}</view>
					</label>
				</radio-group>
			</view> -->
			<submit-button title="添加" @click.native="submitClick" />
		</uni-drawer>

		<pop-up id="addpop" ref="addpopup" type="dialog">
			<pop-up-dialog class="dialog" mode="base" content="确定添加此副柜吗？" type="info" @confirm="confirmDialog()" />
		</pop-up>
	</view>
</template>

<script>
	import Spicks from '../../components/common/spicks.vue'
	import { mapState } from 'vuex'
	import { addDeputyCabinet, setDeputyCabinet, delDeputyCabinet, getDeviceList } from '../../utils/api.js'
	import AddRadio from "./add/add-radio.vue"
	import AddName from "./add/add-name.vue"
	import EditRadio from "./edit/edit-radio.vue"
	import EditName from "./edit/edit-name.vue"
	import SubmitButton from "../../components/common/submit-button.vue"
	import UniDrawer from "../../components/uni-drawer/uni-drawer.vue"
	import DrawerTop from "../../components/common/drawer-top.vue"
	import PopUp from "../../components/uni-popup/uni-popup.vue"
	import PopUpDialog from "../../components/uni-popup-dialog/uni-popup-dialog.vue"
	import AuthoriztionList from '../../components/authoriztion/authoriztion-list.vue'
	export default {
		name: "GroupList",
		components: {
			AddRadio,
			AddName,
			EditRadio,
			EditName,
			SubmitButton,
			UniDrawer,
			DrawerTop,
			PopUp,
			PopUpDialog,
			AuthoriztionList,
			Spicks
		},
		props: {
			minorList: {
				type:Array,
				default: [],
				// required:true
			},
			isMl: {
				type: Boolean,
				default: false
			},
			isShowAdd: {
				type: Boolean,
				default: true
			},
			isEdit:{
				type: Boolean,
				default:true
			},
			current:{
				type: Number,
				default: -1
			}
		},
		data() {
			return {
				// serial_number: "",
				card_index:0,
				// scan_index:0,
				// rfid_index:0,
				// door_index:0,
				typeCurrent:0,//副柜修改时默认选中的类型
				titleType: ['综合柜', '层架柜', '挂架柜'],
				
				checkList:[
					{
						name:'1'
					},
					{
						name:'2'
					},
					{
						name:'3'
					},
					{
						name:'4'
					},
					{
						name:'5'
					},
					{
						name:'6'
					},
					{
						name:'7'
					},
					{
						name:'8'
					},
					{
						name:'9'
					},
					{
						name:'10'
					},
					{
						name:'11'
					},
					{
						name:'12'
					},
					{
						name:'13'
					},
					{
						name:'14'
					},
					{
						name:'15'
					},
					{
						name:'16'
					},
				],
				card_list: [{name:""}],	
				scan_list: [{name:""}],
				rfid_list: [{name:1},{name:2}, {name:3}, {name:4},{name:5},{name: 6}, {name:7}, {name:8},{name:9},{name: 10}, {name:11}, {name:12}],
				door_list: [{name:'1'},{name:'2'},{name:'3'},{name:'4'},{name:'5'},{name:'6'},{name:'7'},{name:'8'}],
				// isFocus:false,
				// isFocus2:false,
				addInfo: {"type_name":"综合柜","name":"",authorization:[],"terminalId":null},
				editInfo:{"type_name":"","name":""},
				editIndex:null,
				subType: null,
				// cabCard:'',
				// card:'',//刷卡
				rfid:[],//rfid
				scan:'',//扫码
				door:'',//门开关
			}
		},
		computed:{
			...mapState(['mainCabinet'])
		},
		mounted:function() {
			console.log("mounted")			
			this.card_list=uni.getStorageSync("card_list")
			this.scan_list=uni.getStorageSync("scan_list")
			uni.$on('addName', e => {
				console.log(e);
				this.addInfo.name = e;
				// console.log(this.addInfo.name);
				console.log(this.addInfo.name);
				if(this.addInfo.name == ''){
					// uni.$emit('checkFocus')
					uni.showToast({
						title:"副柜名字不能为空"
					})
				}		
			})
			// uni.$on('addTitle', e => {
			// 	this.addInfo.title = e;
			// }),	
			// uni.$on('addName', e => {
			// 	console.log(e);
			// 	this.addInfo.name = e;
			// 	console.log(this.addInfo.name);
			// }),
			// uni.$on('editTitle', e => {
			// 	this.editInfo.title = e;
			// }),
			uni.$on('editName', e => {
				this.editInfo.name = e;
			})
		},
		methods: {
			// cardRadioChange(e){ //刷卡器
			// 	console.log(e);
			// 	this.card = e.detail.value
			// },
			scanRadioChange(e){ //扫码器
				console.log(e);
				this.scan = e.detail.value
			},	
			doorRadioChange(e){ //门开关
				console.log(e);
				this.door = e.detail.value
			},
			checkboxChange(e) { //rfid
				console.log(e);
				this.rfid = e.detail.value
			},
			radioChange(e) { //添加柜子类型
				console.log(e);
				this.typeCurrent = e.detail.value
			},
			editRadioChange(e){ //修改柜子类型
				console.log(e);
				this.typeCurrent = e.detail.value
			},
			editCheckChange(e){ //修改rfid
				console.log(e);
				this.rfid = e.detail.value
			},
			editDoorChange(e){ //修改门开关
				console.log(e);
				this.door = e.detail.value
			},
			editScanChange(e){  //修改扫码器
				console.log(e);
				this.scan = e.detail.value
			},
			// editCardChange(e){ //修改刷卡器
			// 	console.log(e);
			// },
			//除聚焦样式
			//修改vuex数据modifyName
			// blurStyle(){
			// 	// console.log(this.cabName);
			// 	this.isFocus = false;
			// 	if(this.cabCard===''){
			// 		uni.showToast({
			// 			title:"卡号不能为空"
			// 		})
			// 		return
			// 	}
			// },
			// blurStyle2(){
			// 	// console.log(this.cabName);
			// 	this.isFocus2 = false;
			// 	// if(this.serial_number===''){
			// 	// 	uni.showToast({
			// 	// 		title:"编号不能为空"
			// 	// 	})
			// 	// 	return
			// 	// }
			// },
			// isSubType(type) {
			// 	if(type=='综合柜'){
			// 		this.subType = 1
			// 	}else if(type=='综合柜'){
			// 		this.subType = 2
			// 	}else if(type=='挂架柜'){
			// 		this.subType = 3
			// 	}else{
			// 		this.subType = 0
			// 	}
			// },
			editClick(item, _index) {
				this.editIndex = _index
				let that=this
				this.card_list.forEach(function(item,index){
					if(item.deviceId==that.mainCabinet.minorList[_index].card_id){
						that.card_index=index
					}
				})
				this.scan_list.forEach(function(item,index){
					if(item.deviceId==that.mainCabinet.minorList[_index].scan_id){
						that.scan=index
					}
				})
				this.rfid=that.mainCabinet.minorList[_index].rfid_id
				this.door=that.mainCabinet.minorList[_index].door_id
				this.typeCurrent = this.titleType.indexOf(this.$store.state.mainCabinet.minorList[this.editIndex].type_name);
				this.editInfo.name = this.$store.state.mainCabinet.minorList[this.editIndex].name;
				this.$refs.editDrawer.open();
			},
			onAdd() {
				this.$refs.addDrawer.open();
				// this.cabCard = ''
			},
			drawerClose() {
				this.$refs.editDrawer.close();
				this.$refs.addDrawer.close();
			},
			editSubmitClick(){	
				// uni.$on('editName', e => {
				// 	this.editInfo.name = e;
				// 	console.log(this.editInfo.name);
				// 	if(this.editInfo.name===''){
				// 		// uni.$emit('checkFocus')
				// 		uni.showToast({
				// 			title:"副柜名字不能为空"
				// 		})
				// 		return
				// 	}
				// 	// this.editInfo.type_name = this.editInfo.type_name ? this.editInfo.type_name : this.$store.state.mainCabinet.minorList[this.editIndex].type_name
				// 	// this.editInfo.name = this.editInfo.name? this.editInfo.name : this.$store.state.mainCabinet.minorList[this.editIndex].name
					
				// })
				this.$refs.editpopup.open();
				
			},
			deleteSubmitClick(){
				this.$refs.deletepopup.open()
			},
			submitClick() {
				console.log("submitClick")
				this.$refs.addpopup.open();						
			},
			editConfirmDialog(){
				let type_name="综合柜"
				if(this.typeCurrent==1){
					type_name = "层架柜"
				}else if(this.typeCurrent==2){
					type_name = "挂架柜"
				}
				setDeputyCabinet({
					subId: this.minorList[this.editIndex].terminalId,
					subName: this.editInfo.name,
					subType: this.typeCurrent+1
				}).then(res=>{
					console.log('修改副柜',res);
					let minor={
						name:this.editInfo.name,
						type_name:type_name,
						type:this.typeCurrent+1,//类型 1-综合柜 2-层架柜 3-挂架柜
						card_id:this.card_list[this.$refs.editCardSpicks.select_index].deviceId,
						// scan_id:this.scan_list[this.scan].deviceId,
						rfid_id:this.rfid,
						door_id:this.door,
						door_status:false,//门状态
						door_pull:false,//拉出
					}			
					this.$store.commit('editMinor',{"info":minor,"index":this.editIndex});
					this.editInfo = {"title":"","name":""};		
					console.log(this.minorList);
					this.$refs.editpopup.close();
					this.$refs.editDrawer.close();
					this.$forceUpdate()
				})
			},	
			async deleteConfirmDialog(){
				const res = await delDeputyCabinet()
				console.log('删除副柜',res);
				if(res.code==500){
					uni.showToast({
						title: '删除成功失败，柜中还有货物，请先移出货物'
					})
					this.$refs.deletepopup.close();
				}else{
					uni.showToast({
						title: '删除成功'
					})
					this.$store.commit('deleteMinor',this.editIndex);
					this.$refs.deletepopup.close();
					this.$refs.editDrawer.close();
				}
			},
			 confirmDialog() {
				// this.isSubType(this.addInfo.type_name)
				addDeputyCabinet({
					subName: this.addInfo.name,
					subType: this.typeCurrent+1,
					terminalId:this.mainCabinet.terminalId
					
				}).then(res=>{
					console.log(res.data)
					if(res.code===0){
						let type_name="综合柜"
						if(this.typeCurrent==1){
							type_name = "层架柜"
						}else if(this.typeCurrent==2){
							type_name = "挂架柜"
						}
						let minor={
							name:this.addInfo.name,
							type_name:type_name,
							terminalId:res.data,
							type:this.typeCurrent+1,//类型 1-综合柜 2-层架柜 3-挂架柜type:this.typeCurrent+1,//类型 1-综合柜 2-层架柜 3-挂架柜
							card_id: this.card_list[this.$refs.addCardSpicks.select_index].deviceId,
							// scan_id: this.scan_list[this.scan].deviceId,
							rfid_id:this.rfid,
							door_id:this.door,
							authorization:[],
						}
						this.$store.dispatch('addMinor',minor);
						this.addInfo = minor;						
						this.$refs.addpopup.close();
						this.$refs.addDrawer.close();
					}
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.group-list {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		height: 100%;
		justify-content: flex-start;
		/* border:0.5px red solid; */
		margin: 0 auto;
		// height: 310rpx;
		// overflow: scroll;
		padding-top: 40rpx;
		box-sizing: border-box;
		.add {
			// width: 486rpx;
			// margin-left: 60rpx;
			width: 16.87vw;
			margin-left: 2.07vw;
			margin-bottom:28rpx;
			.bg {
				width: 100%;	
			}
		}
	}
	.ml {
		&:first-child {
			margin-left: 0 !important;
		}
	}
	.group-item-b{
		margin-bottom:304rpx !important;
	}
	.group-item {
		position: relative;
		// width: 486rpx;
		// margin-left: 60rpx;
		width: 16.87vw;
		margin-left: 2.07vw;
		margin-bottom:30rpx;
		box-sizing: border-box;
	}
	.bg {
		width: 100%;
		background-size: contain;
	}
	.title {
		position: absolute;
		left: 60rpx;
		top: 20rpx;
		font-size: 40rpx;
		color: #fff;
	}
	.edit_icon {
		position: absolute;
		top: 32rpx;
		right: 40rpx;
		// width: 40rpx;
		height: 2.88vh !important;
		width: 1.53vw;
	}
	.main_icon {
		position: absolute;
		background: #fff;
		padding: 40rpx 110rpx;
		// top: 140rpx;
		// left: 65rpx;
		top: 9vh;
		left: 50%;
		transform: translateX(-50%);
		border-radius: 20rpx;
		text-align: center;
	}
	.main_icon image {
		// width: 130rpx;
		// height: 166rpx;
		width: 4.514vw;
		height: 10.85vh !important;
	}
	.info {
		position: absolute;
		// top: 460rpx;
		top: 30vh;
		text-align: center;
		width: 100%;
		line-height:1.7;
	}
	.info>view {
		font-size: 30rpx;
		color: #777;
	}
	.info .name {
		font-size: 40rpx;
		color: #333;

		}
	#deletepopup,#editpopup,#addpop{
		z-index: 1000;
		.dialog {
			width:700rpx;
		}
	}
	.delete {
		position: absolute;
		bottom:108rpx;
		right:44rpx;
		width:80rpx;
	}
	.contentBox {
		background:#F1F9FF;
		border-radius: 20rpx;
		// width: 790rpx;
		// width: 27.44vw;
		width: 45.44vw;
		margin: 0 auto;
		// margin-bottom: 30rpx;
		margin-bottom: 1.97vh;
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		.btitle {
			color: #777777;
			font-size: 34rpx;
			padding:24rpx 2rpx 24rpx 36rpx;
			box-sizing: border-box;
		}
		.name_box {
			// width:584rpx;
			// height: 88rpx;
			width: 20.25vw;
			height: 5.7vh;
			// line-height: 80rpx;
			line-height: 5.5vh;
			background: #FFFFFF;
			border: 4rpx solid #CCCCCC;
			border-radius:20rpx;
			font-size:36rpx;
			padding-left:45rpx;
			margin-left: 24rpx;
			color: #222;
			box-sizing: border-box;
		}
	}
	
	.focusstyle {
		border: 4rpx solid #4F9AFF !important;
	}
	.contentTypeRadio {
		background: #F1F9FF;
		border-radius: 20rpx;
		// width: 790rpx;
		width: 45.44vw;
		margin: 0 auto;
		display: flex;
		// margin-top: 30rpx;
		// margin-bottom: 30rpx;
		margin-top: 1.97vh;
		margin-bottom: 1.97vh;
		.radioTypeTop {
			display: flex;
			align-items: center;
			padding: 34rpx 0 34rpx 30rpx;	
		}
	}
	.contentBoxRadio {
		background: #F1F9FF;
		border-radius: 20rpx;
		// width: 790rpx;
		width: 45.44vw;
		margin: 0 auto;
		// margin-top: 30rpx;
		// margin-bottom: 30rpx;
		margin-top: 1.97vh;
		margin-bottom: 1.97vh;
		.radioTop {
			display: flex;
			align-items: center;
			padding: 0 0 34rpx 30rpx;
			
		}
	}
	.titleR {
		color: #777777;
		font-size: 34rpx;
		padding: 34rpx 0 34rpx 30rpx;
	}
	.radioInfo {
		display: flex;
		align-items: center;
		margin-right: 60rpx;
		.radioText {
			font-size: 34rpx;
			color: #777777;
		}
	}
	
	.contentBoxR {
		background: #F1F9FF;
		border-radius: 20rpx;
		// width: 790rpx;
		width: 45.44vw;
		margin: 0 auto;
		// margin-top: 30rpx;
		// margin-bottom: 30rpx;
		margin-top: 1.97vh;
		margin-bottom: 1.97vh;
		.titleR {
			color: #777777;
			font-size: 34rpx;
			padding: 34rpx 0 34rpx 30rpx;
		}
		.checkBtn{
			display: flex;
			flex-flow: row wrap;
			padding: 0 0 0 15px;
		}
		.checkInfo{
			display: flex;
			align-items: center;
			margin:0 30rpx 20rpx 0;
		}
		.checkText{
			font-size: 34rpx;
			color: #777777;
		}
	}
</style>
